<template>
  <div class="referral-wrap">
    <div class="title-box"></div>
    <div class="download-box" @click="download">立即下载APP</div>
    <div class="company-box">
      <div class="logo-box"><img :src="logo" class="logo" onclick="return false"></div>
      <div class="content">
        <span>{{username}}</span>成功报名<span>{{company}}</span>，入职成功后前{{reTime}}个月，每个月可获得<span>{{reMoney}}</span>元返费。
      </div>
    </div>
    <div class="referral-box">
      <div class="referral-con">
        <div class="title">为朋友点赞加油，可帮助他获取更多高额返费！</div>

        <div class="act-start" v-if="showAct == 1">
          <div class="loading" v-if="progress == 0"></div>
          <div class="progress-box" v-else><img :src="progressBar" class="progress" onclick="return false"/></div>
          <div class="count-box">
            <span class="residue">剩余</span><span class="num">{{hour}}</span><span class="word">时</span><span
            class="num">{{min}}</span><span
            class="word">分</span><span
            class="num">{{second}}</span><span class="word">秒</span>
          </div>
        </div>
        <div class="act-end" v-else-if="showAct == 2">本次分享活动奖励已结束！</div>


        <!--加油列表轮播图-->
        <swiper :options="swiperOption" class="like-box" ref="mySwiper" v-if=carouselList.length>
          <swiper-slide v-for="(carousel,i) in carouselList" :key="i">
            <ul class="user-box">
              <li v-for="(item,index) in carousel.slideObj" :key="index">
                <div class="avatar-box">
                  <img :src="(item.userUrl == '' || item.userUrl == null)?require('./avatar.png'):item.userUrl"
                       class="avatar" onclick="return false"/>
                </div>
                <div class="nickname">{{item.userName}}</div>
              </li>
            </ul>
          </swiper-slide>
          <div class="swiper-pagination" slot="pagination"></div>
        </swiper>

        <div class="play-btn" v-if="play == 1" @click="playUp">为他加油</div>
        <div class="play-suc" v-else-if="play == 2">{{content}}</div>
      </div>
      <div class="referral-title">
        <div class="title">
          已有<span>{{number}}</span>人点赞，共为您的好友获取<span>{{parseInt(this.number * 5)}}</span>元返费奖励！
        </div>
      </div>
    </div>

    <div class="rule-box">
      <div class="rule-title"><img src="./rule.png" class="title" onclick="return false"/></div>
      <div class="word">活动规则</div>
      <div class="content">
        <div class="rule">
          <p>1.用户需要登录蓝聘账户后才能帮助朋友点赞加油</p>
          <p>2.帮助朋友点赞加油获取的奖励，会同入职用户的返费奖励一起发放，若该用户入职失败或者入职后不满足返费奖励领取条件，则分享获取的额外奖励无效</p>
          <p>3.本平台保留该活动的解释权</p>
        </div>
      </div>
    </div>

    <v-dialog v-model="showModal" content="你还未登录，是否立即登录？" cancelText="否" confirmText="是" @confirm="confirm"
              @cancel="cancel"></v-dialog>
  </div>
</template>

<script>
  import dialog from "../../components/dialog"
  import {getUrlKey, doubleNum, getSessionStore} from "../../config/util"
  import {baseUrl} from "../../config/env"

  export default {
    inject: ['reload'],
    data() {
      return {
        play: 0,
        showModal: false,
        logo: "",
        username: "",
        company: "",
        reTime: "",
        reMoney: "",
        hour: "",
        min: "",
        second: "",
        number: "",
        progress: 0,
        userSign: "",
        interviewId: "",
        progressBar: "",
        userList: [],
        countTime: "",
        content: "",
        actEnd: 0,
        showAct: 0,
        intervalDate: null,
        slideList: [],
        carouselList: [],
        swiperOption: {
          notNextTick: true,
          pagination: {
            el: '.swiper-pagination',
            clickable: true,
          },
          autoplay: {
            delay: 4500,
            disableOnInteraction: false
          },
          loop: true,
          observer: true,
          observeParents: true,
        },
        id: ""
      }
    },
    mounted() {
      let base64 = require('js-base64').Base64;
      this.id = getUrlKey("id");//微信登录跳转
      if (this.id) {
        sessionStorage.setItem("user_sign", base64.encode(this.id));
      }

      if (getSessionStore("user_sign")) {
        this.userSign = base64.decode(getSessionStore("user_sign"));
      }
      if (getUrlKey("interviewId")) {
        this.interviewId = getUrlKey("interviewId");
      } else {
        this.interviewId = getSessionStore("referralInterviewId");
      }
      this.queryReferral();
    },
    methods: {
      queryReferral() {//查询推荐入职
        this.$vux.loading.show({
          text: '加载中',
        });
        this.axios.get(baseUrl + "/recommend/get_work_recommend?sgin=" + this.userSign + "&workOrderId=" + this.interviewId).then((res) => {
          let resultObj = res.data;
          this.$vux.loading.hide();
          if (resultObj.code == 0 && resultObj.data != null) {
            this.username = resultObj.data.userName;
            this.company = resultObj.data.mechanismName;
            this.reMoney = resultObj.data.reMoney;
            this.reTime = resultObj.data.reTime;
            this.logo = resultObj.data.mechanismUrl;
            this.countTime = resultObj.data.time;
            //活动倒计时
            this.intervalDate = setInterval(() => {
              let nowTime = new Date().getTime();
              if (this.countTime >= nowTime) {//活动进行中
                let t = this.countTime - nowTime;
                let day = Math.floor(t / 1000 / 60 / 60 / 24);
                let hours = Math.floor(t / 1000 / 60 / 60 % 24);
                let minute = Math.floor(t / 1000 / 60 % 60);
                let sec = Math.floor(t / 1000 % 60);
                this.hour = doubleNum(parseInt(day * 24) + parseInt(hours));
                this.min = doubleNum(minute);
                this.second = doubleNum(sec);
                this.showAct = 1;
              }
              else {
                this.content = "活动结束";
                this.play = 2;
                this.actEnd = 1;
                this.showAct = 2;
                clearInterval(this.intervalDate);
              }
            }, 100);

            if (resultObj.data.recommendStatus > 0) {//是否为他加过油
              this.content = "点赞成功";
              this.play = 2;
            } else {
              this.content = "为他加油";
              this.play = 1;
            }

            let referralList = resultObj.data.userList;
            this.number = referralList.length;
            if (referralList.length > 0) {
              this.progress = referralList.length;
              this.showProgress();
              this.userList = referralList;
              if (referralList.length >= 20) {//活动结束
                this.content = "活动结束";
                this.play = 2;
                this.showAct = 2;
                clearInterval(this.intervalDate);
              } else {
                for (let i = 0, length = 20 - referralList.length; i < length; i++) {
                  this.userList.push("avatar");
                }
              }
            } else {//没有推荐入职的用户
              for (let i = 0, length = 20 - referralList.length; i < length; i++) {
                this.userList.push("avatar");
              }
            }

            //处理轮播数据
            for (let k = 0; k < this.userList.length; k++) {
              this.slideList.push(this.userList[k]);
              if (this.slideList.length >= 10) {
                let obj = {};
                obj.slideObj = this.slideList;
                this.carouselList.push(obj);
                this.slideList = [];
              }
            }
          }
          else {
            this.$vux.toast.text(resultObj.msg, "middle");
          }
        }).catch(() => {
          this.$vux.loading.hide();
          this.$vux.toast.text("网络异常", "middle");
        });
      },
      playUp() {//为他加油
        if (this.userSign) {
          this.cheer();
        } else {
          this.showModal = true;
        }
      },
      cheer() {
        this.$vux.loading.show({
          text: '加载中',
        });
        let data = {"workOrderId": this.interviewId};
        this.axios.post(baseUrl + "/recommend/add_work_recommend?sgin=" + this.userSign, data).then((res) => {//为他加油
          let resultObj = res.data;
          this.$vux.loading.hide();
          if (resultObj.code == 0) {
            if (resultObj.data == 0) {
              this.reload();
              this.content = "为他加油";
              this.$vux.toast.text("为他加油失败，请重试", "middle");
            } else {
              this.content = "点赞成功";
              this.reload();
            }
          } else if (resultObj.code == 10002) {
            this.showModal = true;
          } else {
            this.$vux.toast.text(resultObj.msg, "middle");
          }
        }).catch(() => {
          this.$vux.loading.hide();
          this.$vux.toast.text("网络异常", "middle");
        });
      },
      download() {//下载APP
        window.location.href = "https://url.cn/5AUAFDU";
      },
      cancel() {
        this.showModal = false
      },
      confirm() {//未登录
        sessionStorage.setItem("cheer_sign", "001188"); //登录后返回详情标识
        this.$router.push({path: "/login", query: {interviewId: this.interviewId}});
      },
      showProgress() {
        switch (this.progress) {
          case 1:
            this.progressBar = require("./bar_01.png");
            break;
          case 2:
            this.progressBar = require("./bar_02.png");
            break;
          case 3:
            this.progressBar = require("./bar_03.png");
            break;
          case 4:
            this.progressBar = require("./bar_04.png");
            break;
          case 5:
            this.progressBar = require("./bar_05.png");
            break;
          case 6:
            this.progressBar = require("./bar_06.png");
            break;
          case 7:
            this.progressBar = require("./bar_07.png");
            break;
          case 8:
            this.progressBar = require("./bar_08.png");
            break;
          case 9:
            this.progressBar = require("./bar_09.png");
            break;
          case 10:
            this.progressBar = require("./bar_10.png");
            break;
          case 11:
            this.progressBar = require("./bar_11.png");
            break;
          case 12:
            this.progressBar = require("./bar_12.png");
            break;
          case 13:
            this.progressBar = require("./bar_13.png");
            break;
          case 14:
            this.progressBar = require("./bar_14.png");
            break;
          case 15:
            this.progressBar = require("./bar_15.png");
            break;
          case 16:
            this.progressBar = require("./bar_16.png");
            break;
          case 17:
            this.progressBar = require("./bar_17.png");
            break;
          case 18:
            this.progressBar = require("./bar_18.png");
            break;
          case 19:
            this.progressBar = require("./bar_19.png");
            break;
          case 20:
            this.progressBar = require("./bar_20.png");
            break;
        }
      }
    },
    computed: {
      swiper() {
        return this.$refs.mySwiper.swiper;
      }
    },
    components: {
      "v-dialog": dialog
    }
  }
</script>

<style lang="stylus" scoped>
  @import "../../assets/stylus/mixin.styl"

  .referral-wrap
    position: fixed
    wh(100%, 100%)
    bg-image("./bg.png", 100%, 100%)
    overflow: hidden
    .title-box
      margin: 0 auto
      margin-top: 0.28rem
      margin-bottom: 0.16rem
      wh(82.53%, 4.19%)
      bg-image("./title.png", 100%, 100%)
    .download-box
      fj(center, center)
      margin-left: auto
      margin-bottom: 0.16rem
      wh(2.987rem, 0.667rem)
      background: rgba(249, 249, 249, 1)
      box-shadow: 0rem 0.04rem 1px 0rem rgba(4, 39, 138, 0.56)
      border-top-left-radius: 0.333rem
      border-bottom-left-radius: 0.333rem
      size-color(0.347rem, rgba(255, 96, 0, 1))
      font-weight: bold
    .company-box
      margin: 0 auto
      fj(space-between, center)
      margin-bottom: 0.133rem
      wh(93.33%, 10.18%)
      background: rgba(226, 232, 255, 1)
      box-shadow: 0rem 0.04rem 0.067rem 0rem #3E41FA
      border-radius(0.133rem)
      .logo-box
        margin-left: 0.133rem
        wh(26.4%, 1.333rem)
        .logo
          wh(100%, 100%)
      .content
        margin-right: 0.293rem
        wh(64.93%, auto)
        size-color(0.333rem, rgba(68, 68, 68, 1))
        font-weight: 500
        line-height: 0.44rem
        span
          size-color(0.333rem, rgba(68, 68, 68, 1))
          font-weight: 500
    .referral-box
      margin: 0 auto
      wh(93.33%, 53.08%)
      margin-bottom: 0.3rem
      border: 0.067rem solid rgba(210, 237, 255, 1)
      border-radius: 0.16rem
      overflow: hidden
      .referral-con
        position: relative
        margin: 0 auto
        margin-top: 0.2rem
        wh(96.8%, 80.34%)
        background: rgba(255, 255, 255, 1)
        opacity: 0.9
        border-top-left-radius: 0.107rem
        border-top-right-radius: 0.107rem
        .title
          text-align: center
          padding-top: 0.15rem
          margin-bottom: 0.15rem
          size-color(0.387rem, rgba(255, 96, 0, 1))
        .act-start
          margin-bottom: 0.187rem
          .loading
            margin: 0 auto
            margin-bottom: 0.293rem
            wh(2.867rem, 0.16rem)
            background: rgba(114, 65, 255, 1)
            border: 0.027rem solid rgba(141, 105, 246, 1)
            border-radius(0.08rem)
          .progress-box
            margin: 0 auto
            margin-bottom: 0.2rem
            wh(2.867rem, 0.16rem)
            .progress
              wh(100%, 100%)
          .count-box
            fj(center, center)
            font-size: 0.293rem
            .residue
              padding-right: 0.2rem
              font-weight: 500
              color: rgba(255, 0, 0, 1)
            .num
              width: auto
              height: 0.4rem
              line-height: 0.42rem
              background: linear-gradient(180deg, rgba(252, 134, 50, 1), rgba(255, 41, 24, 1))
              border-radius(0.053rem)
              font-weight: bold
              color: rgba(255, 255, 255, 1)
              padding-left: 0.1rem
              padding-right: 0.1rem
              @media screen and (device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) {
                display: flex
                align-items: center
                line-height: 0.4rem
              }
              @media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-device-pixel-ratio: 3) {
                display: flex
                align-items: center
                line-height: 0.4rem
              }
              @media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {
                display: flex
                align-items: center
                line-height: 0.4rem
              }
              @media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-device-pixel-ratio: 2) {
                display: flex
                align-items: center
                line-height: 0.4rem
              }
              @media screen and (device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2) {
                display: flex
                align-items: center
                line-height: 0.4rem
              }
              @media screen and (device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2) {
                display: flex
                align-items: center
                line-height: 0.4rem
              }
            .word
              padding-left: 0.2rem
              padding-right: 0.2rem
              font-weight: 500
              color: rgba(255, 0, 0, 1)
        .act-end
          wh(100%, 0.9rem)
          line-height: 0.9rem
          text-align: center
          size-color(0.387rem, rgba(255, 0, 0, 1))
        .like-box
          margin: 0 auto
          width: 100%
          size-color(0.28rem, rgba(68, 68, 68, 1))
          .user-box
            display: flex
            flex-wrap: wrap
            width: 100%
            li
              wh(20%, 1.65rem)
              margin-bottom: 0.2rem
              box-sizing: border-box
              .avatar-box
                margin: 0 auto
                fj(center, center)
                border-radius(50%)
                wh(1.173rem, 1.173rem)
                border: 1px dashed rgba(166, 166, 166, 1)
                .avatar
                  border-radius(50%)
                  wh(1rem, 1rem)
              .nickname
                width: 100%
                text-align: center
                padding-top: 0.1rem
                ellipsis()
        .like-box .swiper-pagination-bullets
          bottom: 0.2rem
        .play-btn
          position: absolute
          bottom: 0.05rem
          left: 0
          right: 0
          margin: auto
          wh(3.493rem, 0.867rem)
          line-height: 0.867rem
          text-align: center
          bg-image("./play.png", 100%, 100%)
          size-color(0.387rem, rgba(255, 255, 255, 1))
          font-weight: bold
          text-shadow: 0rem 0.027rem 0rem rgba(96, 2, 47, 0.35)
        .play-suc
          position: absolute
          bottom: 0.15rem
          left: 0
          right: 0
          margin: auto
          wh(3.493rem, 0.867rem)
          line-height: 0.867rem
          text-align: center
          bg-image("./playsuc.png", 100%, 100%)
          size-color(0.387rem, rgba(255, 255, 255, 1))
          font-weight: bold
          text-shadow: 0rem 0.027rem 0rem rgba(96, 2, 47, 0.35)

  .referral-title
    fj(center, center)
    margin: 0 auto
    wh(98%, 16.10%)
    bg-image("./prize.png", 100%, 100%)
    .title
      width: 80%
      margin-left: auto
      margin-right: 2.5%
      size-color(0.347rem, rgba(255, 255, 255, 1))
      font-weight: 500
      line-height: 0.4rem

  .rule-box
    position: relative
    display: flex
    margin: 0 auto
    wh(93.33%, 18.5%)
    background: rgba(220, 236, 255, 1)
    box-shadow: 0rem 0.067rem 0.04rem 0rem rgba(0, 37, 194, 0.29)
    opacity: 0.95
    border-radius(0.133rem)
    .rule-title
      position: absolute
      left: 0
      right: 0
      top: -0.2rem
      margin: auto
      wh(32.8%, 0.8rem)
      .title
        wh(100%, 100%)
    .word
      position: absolute
      width: 100%
      text-align: center
      size-color(0.347rem, rgba(255, 255, 255, 1))
      font-weight: bold
    .content
      fj(center, center)
      margin: 0 auto
      wh(92.53%, auto)
      line-height: 0.44rem
      .rule
        padding-top: 0.5rem
        font-weight: 500
        size-color(0.347rem, rgba(68, 68, 68, 1))
</style>
